<template>
  <div class="topnav">
    <div :class="{aa:a}" class="left">
      <div>{{location}}</div>
    </div>
    <router-link to="/search" class="right">
      <input placeholder="请输入商家或商品名称" />
      <span></span>
    </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      a: false,
    };
  },
  computed:{
    ...mapState('search',['location'])
  },
  mounted() {
    window.addEventListener(
      "scroll",
      (e) => {
        let top = document.documentElement.scrollTop;
        if (top > 400) {
          this.a = true;
        } else {
          this.a = false;
        }
      },
      true
    );
  },
};
</script>

<style lang="scss" scoped>
.aa {
  max-width: 0 !important;
}
.topnav {
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: #000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  z-index: 100;
  .left {
    line-height: 30px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 16px;
    color: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 200px;
    transition: 500ms;
    div {
      max-width: 140px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      background: url();
      background-repeat: no-repeat;
      background-size: contain;
      display: inline-block;
      margin-right: 5px;
      -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
    }
    &::after {
      content: "";
      width: 10px;
      height: 10px;
      background: url();
      background-size: contain;
      background-repeat: no-repeat;
      display: inline-block;
      margin-left: 2px;
      margin-right: 20px;
    }
  }
  .right {
    flex: 1;
    width: 100%;
    position: relative;

    input {
      width: 100%;
      position: relative;
      border: none;
      height: 30px;
      padding-left: 30px;
      box-sizing: border-box;
      border-radius: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 30px;
      font-size: 14px;
      opacity: 1;
    }
    span {
      content: "";
      background: url();
      background-repeat: no-repeat;
      background-size: contain;
      width: 16px;
      height: 16px;
      margin: 0 5px 0 10px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>